<script type="text/javascript">
    function submit() {
        $.postJSON("/contract/save/", serializeContract(), function(data) {
            changeContent(data.redirect);
        });
    }

    $("#client-name").autocomplete({
        source: "/client/autocomplete",
        minLength: 1,
        focus: function(event, ui) {
            $("#client-name").val(ui.item.name);
            return false;
        },
        select: function(event, ui) {
            $("#client-name").html(ui.item.name);
            $("#client_id").html(ui.item.id);
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        $("#client-name").html("&nbsp;");
        $("#client_id").html("&nbsp;");
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.name + "</a>")
                .appendTo(ul);
    };

    $("#add_client").click(function() {
        $("#newclient").dialog({
            autoOpen: true,
            height: 270,
            width: 270,
            modal: true,
            buttons: {
                "Add": function() {
                    var client = new Object();
                    client.name = $("#newclient input[name=name]").val();
                    client.street = $("#newclient input[name=street]").val();
                    client.zip = $("#newclient input[name=zip]").val();
                    client.city = $("#newclient input[name=city]").val();
                    client.country = $("#newclient input[name=country]").val();
                    client.vat = $("#newclient input[name=vat]").val();

                    $.postJSON("/client/save/", client, function(data) {
                        if ('message' in data) {
                            displayError(data.message.text);
                        } else {
                            $("#client-name").val(data.name);
                            $("#client_id").html(data.id);
                        }
                    }, "json")
                    $(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        })
    });

    $("#customer-name").autocomplete({
        source: "/customer/autocomplete/",
        minLength: 1,
        focus: function(event, ui) {
            $("#customer-name").val(ui.item.name);
            return false;
        },
        select: function(event, ui) {
            $("#customer-name").html(ui.item.name);
            $("#customer_id").html(ui.item.id);
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        $("#customer-name").html("&nbsp;");
        $("#customer_id").html("&nbsp;");
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.name + "</a>")
                .appendTo(ul);
    };

    $("#add_customer").click(function() {
        $("#newcustomer").dialog({
            autoOpen: true,
            height: 270,
            width: 270,
            modal: true,
            buttons: {
                "Add": function() {
                    var customer = new Object();
                    customer.name = $("#newcustomer input[name=name]").val();

                    $.postJSON("/customer/save/", customer, function(data) {
                        if ('message' in data) {
                            displayError(data.message.text);
                        } else {
                            $("#customer-name").val(data.name);
                            $("#customer_id").html(data.id);
                        }
                    }, "json")
                    $(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        })
    });

    function serializeContract() {
        var contract = new Object();
        contract.name = $("#contract-name").val();
        contract.start = $("#contract-start").val();
        contract.end = $("#contract-stop").val();
        contract.client_id = $("#client_id").html();
        contract.customer_id = $("#customer_id").html();
        contract.rate = $("#rate").val();
        return contract;
    }


    activateMenuContract();
    activateSubMenuNew();

    {% if error_msg %}
        displayError({{ error_msg }})
    {% endif %}
</script>

<div id="newclient" title="New Client">
    <form>
        <div class="newclient_label"><label for="client_name">Name</label></div>
        <div class="newclient_data">
            <input type="text" name="name" id="client_name"/></div>
        <div class="newclient_label"><label for="street">Street</label></div>
        <div class="newclient_data"><input type="text" name="street" id="street" value=""/></div>
        <div class="newclient_label"><label for="zip">Zip</label></div>
        <div class="newclient_data"><input type="text" name="zip" id="zip" value=""/></div>
        <div class="newclient_label"><label for="city">City</label></div>
        <div class="newclient_data"><input type="text" name="city" id="city" value=""/></div>
        <div class="newclient_label"><label for="country">Country</label></div>
        <div class="newclient_data"><input type="text" name="country" id="country" value=""/></div>
        <div class="newclient_label"><label for="vat">VAT</label></div>
        <div class="newclient_data"><input type="text" name="vat" id="vat" value=""/></div>
    </form>
</div>

<div id="newcustomer" title="New Customer">
    <form>
        <div class="newcustomer_label"><label for="customer_name">Name</label></div>
        <div class="newcustomer_data">
            <input type="text" name="name" id="customer_name"/></div>
    </form>
</div>

<div id="contract">
    <div class="column">
        <fieldset>
            <legend>Name, Period, Rate</legend>
            <label for="contract-name">Name</label>
            <div class="value">
                <input id="contract-name" type="text" name="name"/>
            </div>
            <label for="contract-start">Start on</label>
            <div class="value">
                <input id="contract-start" type="text" name="start"/>
            </div>

            <label for="contract-stop">Stop on</label>
            <div class="value">
                <input id="contract-stop" type="text" name="stop"/>
            </div>

            <label for="rate">Hourly Rate</label>
            <div class="value">
                <input id="rate" type="text" name="rate"/>
            </div>
        </fieldset>
    </div>
    <div class="column">
        <fieldset>
            <legend>Client</legend>
            <label for="client-name">Client Name</label>
            <input id="client-name" class="client-name" value=""/>
            <a id="add_client" href="#"><img src="/static/img/add.png" alt="PLUS"/></a>
            <div id="client_id"></div>
        </fieldset>
    </div>
    <div class="column">
        <fieldset>
            <legend>Customer</legend>
            <label for="customer-name">End Customer</label>
            <input id="customer-name" class="customer-name" value=""/>
            <a id="add_customer" href="#"><img src="/static/img/add.png" alt="PLUS"/></a>

            <div id="customer_id"></div>
        </fieldset>
    </div>
</div>

<div id="actions">
    <button class="action" id="submit">Submit</button>
    <button class="action" id="cancel">Cancel</button>
</div>


<script type="text/javascript">
    $("#submit").click(submit);
    $("#cancel").click(function() {
        changeContent("/contract/view/");
    });
</script>